<template>
  <div class="cate">
    <h4>category - {{ title }}</h4>

    <!-- 通过绑定属性的方式传入data中的数据 -->
    <!-- 最终被编译的时候，{ arr: foods对应的数据 } -->
    <slot :arr="foods"></slot>

    <slot name="demo" :num="10" :list="movies"></slot>
  </div>
</template>

<script>
export default {
  // 数据在子组件上
  data() {
    return {
      foods: ['小龙虾', '小火锅', '小汉堡'],
      movies: ['人生大事', '独行月球']
    }
  },
  props: ['title', 'list']
}
</script>

<style lang="less" scoped>
.cate {
  float: left;
  margin: 10px;
  width: 160px;
  background-color: skyblue;
}

h4 {
  background-color: #f40;
  padding: 20px;
}

img {
  width: 100%;
}

video {
  width: 100%;
}

a {
  margin: 0 5px;
}

.content {
  height: 130px;
  background-color: yellowgreen;
}

.links {
  background-color: #e4e4e4;
  padding: 10px 0;
  margin: 10px 0;
}
</style>
